<template>
  <div class="city-search-container">
    <!-- search -->
    <div class="search-block d-flex jc-between ai-center px-7 pt-7 bg-white">
      <div class="input-block d-flex ai-center bg-light flex-1 px-6 pr-0">
        <img src="/static/images/page/search.png" class="search-i mr-3">
        <input type="text" placeholder="请输入城市" confirm-type="search" v-model.trim="model.search"
               @input="searchModelChange" class="w-100 h-100 flex-1 fs-lg">
        <div @tap="model.search = ''" class="clear-btn-wrap p-4">
          <img v-if="model.search" src="/static/images/page/search-clear.png" class="clear-btn">
        </div>
      </div>
      <span class="pl-6" @tap="$router.back()">取消</span>
    </div>
    <!-- main -->
    <scroll-view class="main-container" scroll-y scroll-with-animation :scroll-into-view="toView">
      <!-- gps -->
      <div v-if="gpsLocation" @tap="handleChangeCity(gpsLocation)" class="gps-city d-flex ai-end">
        <img src="/static/images/page/site.png" class="site-i mr-5">
        <p class="fs-xl lh-1">{{gpsLocation}}</p>
        <span class="fs-sm ml-3 text-info lh-1">GPS定位</span>
      </div>
      <!-- search-result -->
      <div v-if="model.search" class="search-result-block">
        <div v-for="item in searchResult" :key="item.key" class="search-city d-flex ai-end">
          <p class="fs-xl lh-1">{{item.name}}</p>
        </div>
      </div>
      <div v-else>
        <!-- hot -->
        <div class="hot-city-block px-7 pt-7 pb-3" :id="hotList.type">
          <p class="fs-xl fwb pb-5">热门城市</p>
          <div class="hot-list d-flex flex-wrap">
            <div v-for="item in hotList.item" :key="item.name" @tap="handleChangeCity(item.name)"
                 class="hot-item bg-green-light fs-xl text-center mr-5 mb-5">
              {{item.name}}
            </div>
          </div>
        </div>
        <!-- list -->
        <div v-for="(letter,c) in cityList" :key="letter.title" class="city-list-block" :id="letter.title">
          <p class="first-key bg-light pl-7 fs-xl">{{letter.title}}</p>
          <div v-for="(city,v) in letter.item" :key="city.name" @tap="handleChangeCity(city.name)"
               class="city-item fs-xl">{{city.name}}</div>
        </div>
      </div>
    </scroll-view>
    <!-- letter nav -->
    <div v-if="!model.search" class="letter-nav-block fs-sm text-center">
      <p v-for="item in letterNav" :key="item.key" @tap="toView = item.key">{{item.name}}</p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { hot, city } from './city'
export default {
  data() {
    return {
      hotList: hot,
      cityList: city,
      toView: '',
      model: {
        search: ''
      },
      searchResult: []
    }
  },
  computed: {
    ...mapGetters([
      'gpsLocation'
    ]),
    letterNav() {
      const nav = this.cityList.map(v => ({ key: v.title, name: v.title }))
      return [{ key: 'hot', name: '热' }, ...nav]
    }
  },
  methods: {
    searchModelChange(e) {
      const value = e.mp.detail.value
      const list = this.cityList
      const result = []
      list.forEach(c => {
        c.item.forEach(v => {
          ~v.name.indexOf(value) ? result.push(v) : ''
        })
      })
      this.searchResult = result
    },
    handleChangeCity(name) {
      this.$store.state.user.location = name
      this.$router.back()
    }
  }

}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.city-search-container {
  .search-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;

    .input-block {
      height: 60rpx;
      border-radius: 30rpx;
      .search-i {
        @include wh(25rpx, 25rpx);
      }
      .clear-btn {
        @include wh(25rpx, 28rpx);
      }
    }
  }
  .main-container {
    @include wh(100%, 100vh);
    padding-top: 90rpx;
  }
  .gps-city,
  .search-city {
    width: 690rpx;
    margin: 0 auto;
    padding-top: 42rpx;
    padding-bottom: 18rpx;
    border-bottom: 1px solid $green-border;
    .site-i {
      @include wh(27rpx, 35rpx);
    }
  }
  .search-city {
    padding-top: 30rpx;
    padding-bottom: 25rpx;
    padding-left: 47rpx;
  }
  .hot-city-block {
    .hot-item {
      min-width: 140rpx;
      padding: 0 15rpx;
      height: 60rpx;
      line-height: 60rpx;
      border: 1px solid $green-border;
      border-radius: 8rpx;
    }
  }
  .city-list-block {
    .first-key {
      height: 40rpx;
      line-height: 40rpx;
      color: #0e601e;
    }
    .city-item {
      @include wh(690rpx, 90rpx);
      line-height: 90rpx;
      margin: 0 auto;
      padding-left: 40rpx;
      border-bottom: 1rpx solid $green-border;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .letter-nav-block {
    position: fixed;
    width: 30rpx;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    p {
      line-height: 40rpx;
    }
  }
}
</style>